<template>
  <div>
    <div>首页页面</div>
    <ul>
      <li
        v-for="item in booksArr"
        :key="item.id"
        @click="$router.push({ path: '/detail', query: { id: item.id } })"
      >
        {{ item.name }} --- {{ item.author }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      booksArr: [
        {
          id: 1,
          name: '钢铁是怎样炼成的',
          author: '保尔柯察金'
        },
        {
          id: 2,
          name: '一千零一夜',
          author: '林桑榆'
        },
        {
          id: 3,
          name: '假如给我三天光明',
          author: '海伦凯勒'
        }
      ]
    }
  },
  created() {
    //通过 this.$route获取当前路由对象, 该对象中包含当前路由的所有信息
    console.log(this.$route)
  }
}
</script>
<style scoped>
</style>